<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<!-- style format -->
<link rel="stylesheet" href="http://validform.rjboy.cn/wp-content/themes/validform/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="../css/common/vendor.css"/>
<link rel="stylesheet" href="../css/common/main.css"/>
<link rel="stylesheet" href="../css/common/common.css"/>
<link rel="stylesheet" href="../ui/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!-- jquery -->
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../ui/validateform/Validform_v5.3.2_min.js"></script>
<!--  ztree -->
<script type="text/javascript" src="../ui/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../ui/ztree/js/jquery.ztree.excheck.js"></script>
<!-- bootstarp -->
<link rel="stylesheet" href="../ui/bootstarp/css/bootstrap.min.css"/>
<script type="text/javascript" src="../ui/bootstarp/js/bootstrap.min.js"></script>
<!--artDialog  -->
<script type="text/javascript" src="../ui/artDialog-master/dist/dialog-min.js"></script>
<link rel="stylesheet" href="../ui/artDialog-master/css/ui-dialog.css"/> 
</head>
<body >
<div class="ibox">
	<div class="ibox-title">
		<h7>
			<i class="fa fa-sliders"></i>新增角色
		</h7>
	</div>
	<div class="ibox-content form  "  >
		<form id="form" class="form-horizontal" role="form" >
			<input type="hidden" value="${roleId}" id="roleId">
			<div class="form-body  ">
				<div class="form-group">
					<label class="col-xs-3 text-right control-label">角色名称</label>
					<div class="col-xs-5">
						<input name="roleName" placeholder="请输入角色名称,不超过16位！"
							class="form-control input-sm" maxlength="25" value="${roleName}" />
					</div>
				</div>
				<div class="form-group">
					<label class="col-xs-3 text-right control-label">权限模块</label>
					<div class="col-xs-5">
						<ul id="tree" class="ztree" style="min-height: 300px;max-height: 300px;"></ul>
					</div>
				</div>
			</div>
			<div class="form-actions text-center" >
					<div class="row" style="text-align: center;">
							<button id="saveBtn" type="button" class="btn btn-sm btn-primary" onclick="updateRole()">提 交</button>
							<button id="cancelBtn" type="button" class="btn btn-sm btn-default" onclick="back()">返  回</button>
					</div>
				</div>
			
		</form>
	</div>
</div>
</body>
<% var root = request.contextPath; %>
<script type="text/javascript">
	var zTree;
	var demoIframe;
	
	var setting = {
		check: {
			enable: true
		},
		view: {
			dblClickExpand: false,
			showLine: true,
			selectedMulti: false
		},
		data: {
			simpleData: {
				enable:true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: ""
			}
		},
		callback: {
			beforeClick: function(treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("tree");
				if (treeNode.isParent) {
					zTree.expandNode(treeNode);
					return false;
				} else {
					demoIframe.attr("src",treeNode.file + ".html");
					return true;
				}
			}
		}
	};
	
	function back(){
		location.href="${root}/sysRole/index";
	}
	
   	$(document).ready(function(){
   		var t = $("#tree");
   		var roleId=${roleId};
   		$.ajax({
			type:"post",
			data:{roleId:roleId},
			url: '../sysRole/getTreeRoleByRoleId',
			async:false,
			dataType:"json",
			success: function(data, textStatus){
					t = $.fn.zTree.init(t, setting, data);
			   		zTree = $.fn.zTree.getZTreeObj("tree");
			   		//zTree.selectNode(zTree.getNodeByParam("id", 101));
			}
		});
   	});
   	
   	function updateRole(){
   		var nodes = zTree.getCheckedNodes(true);
   		var arr = new Array();
   		var roleId = $("#roleId").val()
   		var role={};
   		for(var i=0;i<nodes.length;i++){
   			role.menuId=nodes[i].menuId;
			role.rightId=nodes[i].rightId;
			role.roleId =roleId;
   			arr.push(role);
   			role={};
   		} 
   		$.ajax({
			type:"post",
			data:{
				rightList :JSON.stringify(arr),
				roleId :$("#roleId").val(),
				roleName:$("input[name=roleName]").val()
				},
			url: '../sysRole/updateRole',
			async:false,
			dataType:"json",
			success: function(data, textStatus){
					var d = dialog({
					    title: '提示',
					    okValue: '确定',
					    content: data.info,
					    width: 200,
					    cancel: false,
					    ok: function () {
					    	back();
					    }
					});
					d.show();
			}
   		});
   	}

	
</script>
</html>